<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #xiaoxin {
            width: 1000px;
            height: 600px;
            background-color: #95d389;
            margin: 50px auto;
        }

        #xiaomin {
            width: 1000px;
            height: 600px;
            background-color: #95d389;
            margin: 50px auto;
        }

        #xiaogao {
            width: 1000px;
            height: 600px;
            background-color: #95d389;
            margin: 50px auto;
        }

        #xiaozhang {
            width: 1000px;
            height: 600px;
            background-color: #95d389;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <script src="./js/echarts.min.js"></script>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="xiaoxin"></div>
    <div id="xiaomin"></div>
    <div id="xiaogao"></div>
    <div id="xiaozhang"></div>

    <script>
        const myChart = echarts.init(document.getElementById('xiaoxin'))
        option = {
            title: {
                text: '2023全学科薪资走势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: {
                    lineStyle: {
                        type: 'dashed', // 设置为虚线
                        // color:'#d8dada'
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#e5eaf3'
                    }
                }
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 1100, 1200, 2312, 2344, 3000],
                    type: 'line',
                    smooth: true,
                    symbolSize: 10,
                    lineStyle: {
                        width: 8,
                        color: '#57a0ff'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#61a1f8' // 0% 处的颜色
                            }, {
                                offset: 0.9, color: '#fff' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);



        const myChart1 = echarts.init(document.getElementById('xiaomin'))
        const data = genData(50);
        option = {
            title: {
                text: '同名数量统计',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.legendData
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data.seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        function genData(count) {
            // prettier-ignore
            const nameList = [
                '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
            ];
            const legendData = [];
            const seriesData = [];
            for (var i = 0; i < count; i++) {
                var name =
                    Math.random() > 0.65
                        ? makeWord(4, 1) + '·' + makeWord(3, 0)
                        : makeWord(2, 1);
                legendData.push(name);
                seriesData.push({
                    name: name,
                    value: Math.round(Math.random() * 100000)
                });
            }
            return {
                legendData: legendData,
                seriesData: seriesData
            };
            function makeWord(max, min) {
                const nameLen = Math.ceil(Math.random() * max + min);
                const name = [];
                for (var i = 0; i < nameLen; i++) {
                    name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
                }
                return name.join('');
            }
        }

        myChart1.setOption(option);



        const myChart2 = echarts.init(document.getElementById('xiaogao'))
        option = {
            title: {
                text: 'Multiple Radar'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                left: 'center',
                data: [
                    'A Software',
                    'A Phone',
                    'Another Phone',
                    'Precipitation',
                    'Evaporation'
                ]
            },
            radar: [
                {
                    indicator: [
                        { text: 'Brand', max: 100 },
                        { text: 'Content', max: 100 },
                        { text: 'Usability', max: 100 },
                        { text: 'Function', max: 100 }
                    ],
                    center: ['25%', '40%'],
                    radius: 80
                },
                {
                    indicator: [
                        { text: 'Look', max: 100 },
                        { text: 'Photo', max: 100 },
                        { text: 'System', max: 100 },
                        { text: 'Performance', max: 100 },
                        { text: 'Screen', max: 100 }
                    ],
                    radius: 80,
                    center: ['50%', '60%']
                },
                {
                    indicator: (function () {
                        var res = [];
                        for (var i = 1; i <= 12; i++) {
                            res.push({ text: i + '月', max: 100 });
                        }
                        return res;
                    })(),
                    center: ['75%', '40%'],
                    radius: 80
                }
            ],
            series: [
                {
                    type: 'radar',
                    tooltip: {
                        trigger: 'item'
                    },
                    areaStyle: {},
                    data: [
                        {
                            value: [60, 73, 85, 40],
                            name: 'A Software'
                        }
                    ]
                },
                {
                    type: 'radar',
                    radarIndex: 1,
                    areaStyle: {},
                    data: [
                        {
                            value: [85, 90, 90, 95, 95],
                            name: 'A Phone'
                        },
                        {
                            value: [95, 80, 95, 90, 93],
                            name: 'Another Phone'
                        }
                    ]
                },
                {
                    type: 'radar',
                    radarIndex: 2,
                    areaStyle: {},
                    data: [
                        {
                            name: 'Precipitation',
                            value: [
                                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
                            ]
                        },
                        {
                            name: 'Evaporation',
                            value: [
                                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
                            ]
                        }
                    ]
                }
            ]
        };

        myChart2.setOption(option);

        const myChart3 = echarts.init(document.getElementById('xiaozhang'))
        option = {
            title: {
                text: 'Nightingale Chart',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: [
                    'rose1',
                    'rose2',
                    'rose3',
                    'rose4',
                    'rose5',
                    'rose6',
                    'rose7',
                    'rose8'
                ]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Radius Mode',
                    type: 'pie',
                    radius: [20, 140],
                    center: ['25%', '50%'],
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 5
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 33, name: 'rose 2' },
                        { value: 28, name: 'rose 3' },
                        { value: 22, name: 'rose 4' },
                        { value: 20, name: 'rose 5' },
                        { value: 15, name: 'rose 6' },
                        { value: 12, name: 'rose 7' },
                        { value: 10, name: 'rose 8' }
                    ]
                },
                {
                    name: 'Area Mode',
                    type: 'pie',
                    radius: [20, 140],
                    center: ['75%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 5
                    },
                    data: [
                        { value: 30, name: 'rose 1' },
                        { value: 28, name: 'rose 2' },
                        { value: 26, name: 'rose 3' },
                        { value: 24, name: 'rose 4' },
                        { value: 22, name: 'rose 5' },
                        { value: 20, name: 'rose 6' },
                        { value: 18, name: 'rose 7' },
                        { value: 16, name: 'rose 8' }
                    ]
                }
            ]
        };
        myChart3.setOption(option);
    </script>
</body>

</html>